<script setup lang="ts">
import { ref } from 'vue';
const reply = ref('');
const editing = ref(false);
defineExpose({
	editing,
});
</script>

<template>
	<div class="editor" :style="{ display: editing ? 'table' : 'none' }">
		<el-input autosize v-model="reply" resize="none" :rows="1" type="textarea" placeholder="请输入您的回复">
		</el-input>
		<el-button type="primary" @click="">发表</el-button>
		<div class="too-long" v-if="reply.length > 250">已超出{{ reply.length - 250 }}字</div>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.editor {
	@include clearfix;
	width: 100%;
	margin-top: 20px;
	position: relative;

	.el-textarea {
		width: 90%;
		float: left;
	}

	.el-button {
		width: 7%;
		float: right;
		height: 28px;
		position: relative;
		top: 2px;
	}

	.too-long {
		position: absolute;
		top: -40px;
		right: 50px;
		color: #f56c6c;
	}

}
</style>
